<template>
	<view class="c-image" ref="imgRef" :class="ggclass" :style="{width,height,borderRadius:radius,background}"
		@click="onclick">
		<image :style="{width,height}" :src="srcs" :mode="modes" @load="load" @error="error" show-menu-by-longpress>
		</image>
		<!-- #ifndef MP-TOUTIAO -->
		<c-loading class="loding" isOpenPattern :size="lodingS" :loading="isloding"></c-loading>
		<!-- #endif -->
	</view>
</template>

<script>
	import propsMixin from '../mixins/props/index.js'
	import {
		error
	} from '../../static/img/base64.js'
	import {
		imgFilter as filter
	} from '../ways/filter.js'
	import {
		imgPreview
	} from '../ways/img.js'
	export default {
		mixins: [propsMixin],
		name: 'c-image',
		props: {
			src: {
				type: String,
				default: ''
			},
			errorSrc: {
				type: String,
				default: error
			},
			mode: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},
			radius: {
				type: String,
				default: ''
			},
			isPreview: {
				type: Boolean,
				default: false
			},
			lazy: {
				type: Boolean,
				default: false
			},
			lodingSize: {
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				lazySrc: "",
				ladingVal: '',
				isloding: true,
				imgUrl: '',
			}
		},
		watch: {
			src: {
				handler(n) {
					if (!this.lazy) {
						this.authenticate()
					}
					this.srcs = n || null
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			modes() {
				if (this.mode) return
				if (this.width && !this.height) return 'widthFix'
				if (this.height && !this.width) return 'heightFix'
				return 'scaleToFill'
			},
			srcs: {
				get() {
					let src = this.lazy ? this.lazySrc : this.imgUrl
					return filter(src)
				},
				set(val) {
					this.imgUrl = val
					this.lazySrc = val
				}

			},
			lodingS: {
				get() {
					// console.log(this.lodingSize, 'this.lodingSize')
					if (this.lodingSize) return this.lodingSize
					let unit = String(this.width).match(
						/[a-z|A-Z|'%']+/gi
					);
					// console.log(parseInt(this.width) / 2 + unit, 'parseInt(this.width) / 2 + unit')
					return parseInt(this.width) / 2 + unit
				},
			},
		},
		async mounted() {
			if (this.lazy) {
				this.observer('.c-image', (res) => {
					this.lazySrc = this.src
					this.authenticate()
				})
			}
			// if(!this.lodingSize){
			// 	let res = await this.$getNode('.c-image',this)
			// 	this.lodingS = res.width>100?res.width/res.width.toString()[0]:res.width
			// }
		},
		methods: {
			authenticate() {
				setTimeout(() => {
					if (!this.src) {
						this.srcs = ' '
					}
				}, 10000)
			},
			observer(node, callback) {
				let observer = uni.createIntersectionObserver(this)
				let ob = observer.relativeToViewport()
				ob.observe(node, (res) => {
					callback(res)
					observer.disconnect()
				})
			},
			onclick(e) {
				console.log(1122233)
				if (this.isPreview) {
					imgPreview(this.src)
				}
				this.$emit('click', e)
				this.$emit('tap', e)
			},
			load() {
				this.isloding = false
			},
			error() {
				this.isloding = false
				this.srcs = this.errorSrc
			},
		}
	}
</script>

<style lang="scss" scoped>
	.c-image {
		display: inline-flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		font-size: 0rpx;
		-webkit-text-size-adjust: none;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;

		.loding {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
</style>